<template>
    <div>
        <div class="top" v-if="cur<=3">
            <img src="../../static/img/FDJ.png" alt="" class="img_fo fdj">
            <img src="https://img02.camel.com.cn/image/you_logo_20171109.jpg" alt="" class="logo">
            <img v-if="cur!=3" src="../../static/img/FX.png" alt="" class="img_fo fenxiang">
            <img v-else src="../../static/img/message.png" alt="" class="img_fo fenxiang">
        </div>
        <div :class="{content:cur<=3}">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
        </div>
        <div class="tab">
            <ul class="tabs">
                <li v-for="(item,key,index) in obj" @click="tabqiehuan(index,item)" :class="{active:cur==index}" :data-p="index">
                    <img v-if="cur==index" :src=item.imgs alt="" class="icon_img">
                    <img v-else :src=item.img alt="" class="icon_img">
                    <span>{{item.title}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj: {
                one: {
                    img: "../../static/img/home.png",
                    imgs: "../../static/img/home1.png",
                    path: "/home",
                    title: "首页"
                },
                two: {
                    img: "../../static/img/baozhi_.png",
                    path: "/zhuanti",
                    imgs: "../../static/img/baozhi.png",
                    title: "专题"
                },
                three: {
                    img: "../../static/img/fenlei.png",
                    imgs: "../../static/img/fenlei1.png",
                    path: "/fenlei",
                    title: "分类"
                },
                four: {
                    img: "../../static/img/nvbao.png",
                    imgs: "../../static/img/nvbao1.png",
                    path: "/nothingShop",
                    title: "购物车"
                },
                five: {
                    img: "../../static/img/wode.png",
                    imgs: "../../static/img/wode1.png",
                    path: "/mine",
                    title: "我的"
                }
            },
            cur: 0
        };
    },
    methods: {
        tabqiehuan(i, j) {
            this.cur = i;
            // console.log(this);
            this.$router.push(j.path);
        }
    },
    watch: {
        cur(n, o) {
            // this.cur = n;
            localStorage.setItem("curIndex", n);
        }
    },
    computed: {},
    mounted() {
        this.cur = localStorage.getItem("curIndex");
    },
    beforeDestroy() {}
};
</script>

<style >
* {
    margin: 0;
    padding: 0;
}
.top {
    height: 0.384rem;
    width: 100%;
    display: flex;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #fff;
    border-bottom: 1px solid rgba(74, 74, 74, 0.1);
}
.content {
    margin-top: 0.384rem;
}
.logo {
    width: 0.704rem;
}
.img_fo {
    height: 0.203rem;
    width: 0.19rem;
    top: 9px;
    position: absolute;
    line-height: 1.5;
}
.fdj {
    height: 0.203rem;
    width: 0.203rem;
    left: 0.2rem;
}
.fenxiang {
    right: 20px;
}
.tab {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: #fff;
    padding-top: 0.05rem;
    border-top: 1px solid rgba(74, 74, 74, 0.1);
}
.tabs {
    list-style: none;
    display: flex;
    justify-content: space-around;
}
.tabs li {
    display: flex;
    flex-direction: column;
    font-size: 0.1rem;
    cursor: pointer;
    align-items: center;
}
.icon_img {
    height: 0.203rem;
    width: 0.203rem;
}
.active {
    color: #d2ab44;
}
</style>


